<script src="__CDN__/assets/addons/tongcheng/js/vue.js"></script>
<script src="__CDN__/assets/addons/tongcheng/js/element-ui/index.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/js/element-ui/index.css"></link>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/css/common.css"></link>

<!--<div class="alert alert-info-light" style="margin-bottom:10px;">
  <b>提示：</b>用户配送距离超出配置的最大距离规则时，将无法配送（前端提示：距离超出配送范围）。
</div>-->

<div id="app">
  <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group hide">
      <label class="control-label col-xs-12 col-sm-2">{:__('Module_id')}:</label>
      <div class="col-xs-12 col-sm-8">
        <input id="c-module_id" data-rule="required" data-source="tongcheng/module/index" class="form-control selectpage"
               name="row[module_id]" type="text" value="{$row.module_id|htmlentities}" disabled>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">{:__('Open_surcharge')}:</label>
      <div class="col-xs-12 col-sm-8 m-t-5">
        <input id="c-open_surcharge" name="row[open_surcharge]" type="hidden" value="{$row.open_surcharge}">
        <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-open_surcharge" data-yes="1"
           data-no="0">
          <i class="fa fa-toggle-on text-success {eq name=" $row.open_surcharge" value="0"}fa-flip-horizontal text-gray{/eq}
          fa-2x"></i>
        </a>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">特殊时段配置:</label>
      <div class="col-xs-12 col-sm-10">
        <input id="c-surcharge_config" name="row[surcharge_config]" type="hidden" value='{:json_encode($row.surcharge_config)}'>

        <!--<el-row :gutter="24" v-for="(item, index) in surcharge_config" :key="index">
          <el-col :span="4">
            <el-input :name="'row[surcharge_config][' + index + '][name]'" v-model="item.name" placeholder="收费项名称"></el-input>
          </el-col>
          <el-col :span="6">
            <el-time-picker
              v-model="item.start"
              :name="'row[surcharge_config][' + index + '][start]'"
              placeholder="开始时间">
            </el-time-picker>
          </el-col>
          <el-col :span="6">
            <el-time-picker
              v-model="item.end"
              :name="'row[surcharge_config][' + index + '][end]'"
              placeholder="结束时间">
            </el-time-picker>
          </el-col>
          <el-col :span="4">
            <el-input-number
              v-model="item.fee"
              :name="'row[surcharge_config][' + index + '][fee]'"
              :min="0"
              :step="0.01" step-strictly>
            </el-input-number>
          </el-col>
          <el-col :span="2">
            <el-checkbox
              v-model="item.status"
              :name="'row[surcharge_config][' + index + '][status]'"
              :active-value="true"
              :inactive-value="false"
            >开启</el-checkbox>
          </el-col>
          <el-col :span="2">
            <span class="btn btn-sm btn-danger" @click="remove(index)"><i class="fa fa-times"></i></span>
          </el-col>
        </el-row>-->

        <el-table
          :data="surcharge_config"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="费用项名称"
            width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="收费项名称" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="start"
            label="开始时间"
            width="200">
            <template slot-scope="scope">
              <el-time-picker size="small"
                v-model="scope.row.start"
                              value-format="HH:mm:ss"
                :key="'start' + scope.row.$index"
                placeholder="开始时间"
                style="width: 150px"
              >
              </el-time-picker>
            </template>
          </el-table-column>
          <el-table-column
            prop="end"
            label="结束时间"
            width="200">
            <template slot-scope="scope">
              <el-time-picker size="small"
                v-model="scope.row.end"
                              value-format="HH:mm:ss"
                :key="'end' + scope.row.$index"
                placeholder="结束时间"
                style="width: 150px"
              >
              </el-time-picker>
            </template>
          </el-table-column>
          <el-table-column
            prop="fee"
            label="费用（元）"
            width="180">
            <template slot-scope="scope">
              <el-input-number size="small"
                v-model="scope.row.fee"
                :min="0"
                :step="0.01" step-strictly>
              </el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="开关"
            width="100">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
              >开启</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="remove(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="m-t-10">
          <a href="javascript:;" class="btn btn-sm btn-success" @click="add()"><i class="fa fa-plus"></i> 追加</a>
        </div>
      </div>
    </div>

    <div class="form-group layer-footer">
      <label class="control-label col-xs-12 col-sm-2"></label>
      <div class="col-xs-12 col-sm-8">
        <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
      </div>
    </div>
  </form>
</div>

<script>
  var valid_result = false;
  var _surcharge_config = '{:json_encode($row.surcharge_config)}';//$('#c-surcharge_config').val()
  var _controller = null
  var _form = null

  var app = new Vue({
    el: '#app',
    data: {
      surcharge_config: [],
    },
    created() {
      let surcharge_config = []
      if (_surcharge_config) {
        surcharge_config = JSON.parse(_surcharge_config)
      }
      if (!surcharge_config) {
        this.surcharge_config = []
        // this.surcharge_config.push({
        //   start: 0,
        //   end: 5,
        //   fee: 1,
        // })
      } else {
        this.surcharge_config = surcharge_config
      }
      console.log('this.surcharge_config', this.surcharge_config, surcharge_config, _surcharge_config)

      // this.getForm()
    },
    methods: {
      getForm() {
        var timer = setInterval(() => {
          if (_form) {
            clearInterval(timer);
            console.log('_form3', _form);
            this.bindForm();
          }
        }, 500);
      },
      bindForm() {
        _form.api.bindevent($("form[role=form]"), function(data, ret){
          console.log('bindevent', data, ret);
          if (ret.code == 1) {
            Fast.api.close(data);
          }
          return false;
        });
      },
      // 加规则
      add() {
        this.surcharge_config.push({
          name: '',
          start: '',
          end: '',
          fee: 0,
          status: 0,
        })

        if (_controller) {
          console.log('trigger bindevent', _controller.api)
          // _controller.api.bindevent();
          setTimeout(() => {
            _controller.api.bindevent();
          }, 500);
        }

        console.log('trigger add', this.surcharge_config)
      },
      remove(index) {
        this.surcharge_config.splice(index, 1)
      },

      // 验证
      valid() {
        console.log('trigger valid', this.surcharge_config)
        $('#c-surcharge_config').val(JSON.stringify(this.surcharge_config))
        if (parseInt($('#c-open_surcharge').val()) == 0) {
          valid_result = true
          return true
        }

        if (this.surcharge_config.length === 0) {
          Fast.api.msg('请配置完整的特殊时段规则')
          valid_result = false
          return false
        }

        valid_result = true
      }
    }
  })
</script>
